<script lang="ts" setup>
import { chunkArray, getSvg } from "@/utils";
import { generateMonthMap, formatDate, getCurYr } from "../hooks/useUtils";
import SelYear from "./SelYear.vue";
import SelDate from "./SelDate.vue";
import useFetchWinRes, { useFetchWinResRefs } from "../hooks/useFetchWinRes";
import useFetchDateList, {
  useFetchDateListRefs
} from "../hooks/useFetchDateList";
import useFetchYr, { useFetchYrRefs } from "../hooks/useFetchYr";
import { updateParams } from "@/components/Overlay/hooks/useUtils";

const props = defineProps({
  resData: {
    type: Object,
    default: () => ({})
  }
});
const router = useRouter();
const route = useRoute();
const year = route.query.year;
console.log(year);
function handleDetail(it: any) {
  console.log(it);
  router.push("/lot/detail/" + it.result.draw_id);
}
const monthMap = generateMonthMap();
function handleClickYear(year: any) {
  console.log(year);
  router.push(`/drawHist?year=${year}`);
}
const { toggleDate, updateDate, fetchWinRes } = useFetchWinRes();
const { dateRef, winResParams } = useFetchWinResRefs();

const { toggleYear, updateYear } = useFetchDateList();
const { yearRef } = useFetchDateListRefs();

const { fetchDrawYr } = useFetchYr();
const { curYear } = useFetchYrRefs();

onMounted(() => {
  if (year) {
    curYear.value = year as string;
    fetchDrawYr();
    updateDate({
      draw_year: curYear.value
    });
  }

  if (!year) {
    updateParams(
      {
        draw_year: "",
        draw_id: ""
      },
      winResParams.value
    );
    fetchDrawYr();
    fetchWinRes();
  }
});
const years = computed(() => chunkArray(props?.resData?.years ?? [], 2));
</script>
<template>
  <div>
    <div>
      <img class="w-full h-155" :src="getSvg('home_banner')" />
      <div
        class="w-362 mx-auto h-auto bg-[#fff] shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 translate-y-[-33px] px-16 py-20 mb-20"
      >
        <div class="mx-auto mb-24">
          <div
            class="font-normal text-20 color-[#444] lh-23 text-center not-italic mb-10"
          >
            Check Lottery Results for {{ getCurYr() }}
          </div>
          <div class="text-center font-400 text-16 lh-19 not-italic">
            <span class="color-[#414141]">Check Government Lottery</span>
          </div>
        </div>
        <div class="mb-24 flex justify-around items-center" v-if="year">
          <div class="flex justify-start items-center gap-x-10">
            <div
              class="font-400 text-16 color-[#444] lh-19 text-center not-italic"
            >
              Date
            </div>
            <div
              class="w-120 h-28 bg-[#fff] rounded-4 b-2 b-solid b-#004D8E center gap-x-10 relative z-999"
              @click="toggleDate"
            >
              <div
                class="w-72 font-400 text-14 color-[#004D8E] lh-16 text-center not-italic"
              >
                <SelDate @update:curDate="updateDate" ref="dateRef" />
              </div>
              <div class="center">
                <SvgIcon name="Polygon_5" class="w-11 aspect-ratio-[11/6]" />
              </div>
            </div>
          </div>

          <div class="flex justify-start items-center gap-x-10">
            <div
              class="font-400 text-16 color-[#444] lh-19 text-center not-italic"
            >
              Year
            </div>
            <div
              class="w-95 h-28 bg-[#fff] rounded-4 b-2 b-solid b-#004D8E center gap-x-10 relative z-999"
              @click="toggleYear"
            >
              <div
                class="font-400 text-14 color-[#004D8E] lh-16 text-center not-italic"
              >
                <SelYear @update:curYear="updateYear" ref="yearRef" />
              </div>
              <div class="center">
                <SvgIcon name="Polygon_5" class="w-11 aspect-ratio-[11/6]" />
              </div>
            </div>
          </div>
        </div>
        <div
          class="w-330 h-162 bg-[#fff] shadow-[0px_0px_7px_0px_rgba(113,166,201,0.35)] rounded-8 p-18 mb-16"
          :class="{
            'mb-[24px_!important]': idx1 === resData.winRes.length - 1
          }"
          v-for="(it1, idx1) in resData.winRes"
          :key="idx1"
          @click="handleDetail(it1)"
          v-if="resData?.winRes?.length"
        >
          <div class="flex justify-between items-center mb-8">
            <div class="flex justify-start items-center gap-x-8">
              <img
                class="w-16 h-15"
                :src="getSvg('Group_165(1)')"
                alt=""
              /><span
                class="font-bold text-18 color-[#444] lh-23 text-center not-italic"
                >{{ it1?.result?.draw_day }}
                {{ monthMap?.[it1?.result?.draw_month] }}</span
              >
            </div>
            <div class="flex justify-start items-center gap-x-8">
              <span
                class="font-400 text-10 color-[#444] lh-14 text-center not-italic"
                >Check the Government Lottery
                {{ formatDate(it1?.result?.draw_date) }}</span
              >
              <img class="w-4 h-8" :src="getSvg('Frame_597(1)')" alt="" />
            </div>
          </div>
          <div
            class="w-full h-38 bg-[#C1E8FF] rounded-4 flex justify-between items-center px-20 mb-6"
          >
            <span
              class="font-400 text-12 color-[#595959] lh-14 text-center not-italic"
              >{{ $t("title18") }}</span
            >
            <span class="font-bild text-24 color-[#004D8E] lh-28 not-italic">{{
              it1?.list?.first?.[0]?.draw_number
            }}</span>
          </div>
          <div
            class="w-full h-58 bg-[#EEF6FF] rounded-4 flex flex-col justify-around items-stretch pl-12 pr-26"
          >
            <div class="flex justify-start items-center">
              <div
                class="whitespace-nowrap w-70 font-400 text-12 color-[#595959] lh-14 text-center not-italic"
              >
                {{ $t("title19") }}
              </div>
              <div class="w-154 ml-46 flex justify-between items-center">
                <span
                  class="font-400 text-12 color-[#595959] lh-14 text-center not-italic"
                  >{{ $t("title20") }}</span
                >
                <span
                  v-if="it1?.list?.last3f?.length"
                  v-for="(it2, idx2) in it1.list.last3f"
                  :key="idx2"
                  class="font-400 text-14 color-[#08749E] lh-16 text-center not-italic"
                >
                  {{ it2.draw_number }}
                </span>
              </div>
            </div>
            <div class="flex justify-start items-center">
              <div
                class="w-70 font-400 text-14 color-[#444] lh-16 text-center not-italic"
              >
                {{ it1?.list?.last2?.[0]?.draw_number }}
              </div>
              <div class="w-154 ml-46 flex justify-between items-center">
                <span
                  class="font-400 text-12 color-[#595959] lh-14 text-center not-italic"
                  >{{ $t("title21") }}</span
                >
                <span
                  v-if="it1?.list?.last3b?.length"
                  v-for="(it3, idx3) in it1.list.last3b"
                  :key="idx3"
                  class="font-400 text-14 color-[#08749E] lh-16 text-center not-italic"
                >
                  {{ it3?.draw_number }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            :class="['flex justify-between items-center gap-x-10 mb-12']"
            v-for="(it1, idx1) in years"
            :key="idx1"
            v-if="years?.length"
          >
            <div
              v-for="(it2, idx2) in it1"
              :key="idx2"
              :class="[
                it1[idx2] && it1[idx2 + 1] ? 'w-50%' : 'w-[calc(50%-5px)]'
              ]"
            >
              <div
                @click="handleClickYear(it2)"
                class="w-full h-76 rounded-2 flex flex-col justify-center items-center bg-[url(@/assets/svg/Frame_662.svg)] bg-no-repeat bg-cover bg-center mb-6"
              >
                <div
                  class="font-bold text-14 color-[#fff] lh-16 shadow-[rgba(169,196,212,0.94)] text-stroke-1 text-stroke-[#ECD313] text-center not-italic"
                >
                  ตรวจหวยปี
                </div>
                <div
                  class="h-24 font-bold text-20 color-[#004D8E] lh-23 text-stroke-1 text-stroke-[#FFFFFF] text-center not-italic tracking-[6px]"
                >
                  {{ it2 }}
                </div>
              </div>
              <p
                class="font-400 text-12 color-[#444] lh-14 text-left not-italic"
              >
                ตรวจผลสลากกินแบ่งรัฐบาลย้อนหลัง
                {{ it2 }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
